<template>
  <div class="anchor-radio">
    <!-- 轮播图 -->
    <div class="top-banner">
      <el-carousel :interval="3000" type="card" height="200px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.pic" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 电台分类 -->
    <div class="radio-class-wrap flex">
      <!-- 电台分类子项 -->
      <div
        class="class-item flex-column"
        v-for="item in classList"
        :key="item.id"
      >
        <!-- 头部图片 -->
        <div class="class-top">
          <img :src="item.pic56x56Url" alt="" />
        </div>
        <!-- 分类名称 -->
        <div class="class-name">{{ item.name }}</div>
      </div>
    </div>

    <!-- 付费精选 -->
    <div class="pay-selected-wrap">
      <div class="top flex">
        <div class="left-name">付费精选</div>
        <div class="more">更多>></div>
      </div>
      <div class="class-list-box flex">
        <Paylist v-for="(item,index) in paygiftList" :key="index" :classItem="item" />
      </div>
    </div>

    <!-- 电台个性推荐 -->
    <div class="recommend-radios-wrap">
      <div class="recommend-top flex">
        <div class="left-name">电台个性推荐</div>
        <div class="more">更多>></div>
      </div>
      <div class="recommend-list-wrap flex">
        <Radioscard v-for="(item,index) in djRadiosList" :key="index" :radioCard="item"/>
      </div>
    </div>

    <!-- 创作翻唱 -->
    <div class="created-cover">
      <div class="cover-top flex">
        <div class="left-name">创作 | 翻唱</div>
        <div class="more">更多>></div>
      </div>
      <div class="recommend-list-wrap flex">
        <Radioscard v-for="(item,index) in fanChangList" :key="index" :radioCard="item"/>
      </div>
    </div>
    <!-- 3d|电子 -->
    <div class="electronics-cover">
      <div class="electronics-top flex">
        <div class="left-name">3d | 电子</div>
        <div class="more">更多>></div>
      </div>
      <div class="recommend-list-wrap flex">
        <Radioscard v-for="(item,index) in electronics" :key="index" :radioCard="item"/>
      </div>
    </div>
    <!-- 音乐故事 -->
    <div class="music-story-cover">
      <div class="music-story-top flex">
        <div class="left-name">音乐故事</div>
        <div class="more">更多>></div>
      </div>
      <div class="recommend-list-wrap flex">
        <Radioscard v-for="(item,index) in musicStoryList" :key="index" :radioCard="item"/>
      </div>
    </div>

    <!-- 情感调频 -->
    <div class="emotion-cover">
      <div class="emotion-top flex">
        <div class="left-name">情感调频</div>
        <div class="more">更多>></div>
      </div>
      <div class="recommend-list-wrap flex">
        <Radioscard v-for="(item,index) in emotionList" :key="index" :radioCard="item"/>
      </div>
    </div>

    <!-- 二次元 -->
    <div class="erciyuan-cover">
      <div class="erciyuan-top flex">
        <div class="left-name">二次元</div>
        <div class="more">更多>></div>
      </div>
      <div class="recommend-list-wrap flex">
        <Radioscard v-for="(item,index) in erCiYuan" :key="index" :radioCard="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanner,
  getRadioClassList,
  getPayPaygiftList,
  getDjRecommendList,
  getRadioTypeList
} from "@/network/anchorradio";
import Paylist from "@/components/Paylist";
import Radioscard from "@/components/Radioscard";
export default {
  name: "Anchorradio",
  data() {
    return {
      bannerList: [],
      classList: [],
      paygiftList: [],
      djRadiosList: [],
      fanChangList: [],
      electronics: [],
      musicStoryList: [],
      emotionList: [],
      erCiYuan: []
    };
  },
  created() {
    this.getDjBanner();
    this.getRadioClass();
    this.getPaygift();
    this.getDjRecommend();
    this.getRadioType(2001);
    this.getRadioType(10002);
    this.getRadioType(2);
    this.getRadioType(3);
    this.getRadioType(3001);
  },
  methods: {
    //获取轮播图数据
    getDjBanner() {
      getBanner("/dj/banner").then((res) => {
        // console.log(res.data);
        this.bannerList = res.data;
      });
    },
    //获取电台分类
    getRadioClass() {
      getRadioClassList("/dj/catelist").then((res) => {
        // console.log(res.categories);
        this.classList = res.categories;
      });
    },
    //获取付费精选
    getPaygift() {
      getPayPaygiftList("/dj/paygift",{
        limit:4,
        offset: 1
      }).then((res) => {
        // console.log(res.data.list);
        this.paygiftList = res.data.list;
      });
    },
    //获取个性推荐
    getDjRecommend() {
      getDjRecommendList("/dj/personalize/recommend").then((res) => {
        // console.log(res);
        this.djRadiosList = res.data;
      });
    },
    //电台分类
    getRadioType(type) {
      getRadioTypeList("/dj/recommend/type",{
        type: type
      }).then((res) => {
        // console.log(res.djRadios);
        switch(res.djRadios[0].categoryId){
          case 2001: 
            this.fanChangList = res.djRadios.splice(0,6);
            break;
          case 10002: 
            this.electronics = res.djRadios.splice(0,6);
            break;
          case 2: 
            this.musicStoryList = res.djRadios.splice(0,6);
            break;
          case 3: 
            this.emotionList = res.djRadios.splice(0,6);
            break;
          case 3001: 
            this.erCiYuan = res.djRadios.splice(0,6);
            break;
        }
      });
    },
  },
  components: {
    //付费精选子组件
    Paylist,
    //电台个性推荐通用子组件
    Radioscard
  }
};
</script>

<style scoped lang="less">
// 轮播图ui组件
.el-carousel__item img {
  opacity: 0.75;
  width: 100%;
  // line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.anchor-radio {
  .top-banner {
    margin-top: 20px;
  }

  .radio-class-wrap {
    .class-item {
      width: 100px;
      height: 80px;
      margin: 0 32px;
      margin-top: 20px;
      .class-top {
        img {
          width: 60px;
          height: 60px;
        }
      }
      .class-name {
        font-size: 14px;
        color: red;
      }
    }
  }
// 付费精选
  .pay-selected-wrap {
    margin-top: 20px;
    .top {
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more {
        cursor: pointer;
        font-size: 14px;
      }
    }
  }

//精选电台
  .recommend-radios-wrap{
    margin-top: 20px;
    .recommend-top{
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more{
        font-size: 14px;
        cursor: pointer;
      }
    }
    .recommend-list-wrap{
      height: 220px;
    }
  }
//创作翻唱
  .created-cover{
    margin-top: 20px;
    .cover-top{
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more{
        font-size: 14px;
        cursor: pointer;
      }
    }
    .recommend-list-wrap{
      height: 220px;
    }
  }
// 3d|电子
  .electronics-cover{
    margin-top: 20px;
    .electronics-top{
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more{
        font-size: 14px;
        cursor: pointer;
      }
    }
    .recommend-list-wrap{
      height: 220px;
    }
  }

  // 音乐故事
  .music-story-cover{
    margin-top: 20px;
    .music-story-top{
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more{
        font-size: 14px;
        cursor: pointer;
      }
    }
    .recommend-list-wrap{
      height: 220px;
    }
  }

  //情感调频
  .emotion-cover{
    margin-top: 20px;
    .emotion-top{
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more{
        font-size: 14px;
        cursor: pointer;
      }
    }
    .recommend-list-wrap{
      height: 220px;
    }
  }
  // 二次元
  .erciyuan-cover{
    margin-top: 20px;
    .erciyuan-top{
      height: 30px;
      border-bottom: 2px solid skyblue;
      .left-name{
        font-size: 20px;
      }
      .more{
        font-size: 14px;
        cursor: pointer;
      }
    }
    .recommend-list-wrap{
      height: 220px;
    }
  }
}
</style>